<template>
  <div ref="inputBox" :class="{ [$style['controller-input-text']]: true, [$style.visible]: inputVisible }"
    :style="{ bottom: inputVisible ? `${inputPositionY}px` : '' }">
    <div v-if="inputVisible" :class="$style['qa-list']">
      <div :class="$style['qa-list-body']">
        <button v-for="x in ttsaStore.questions" :key="x.id" v-tap="() => send(x.question_title, x.id)"
          :class="$style['qa-list-item']">
          {{ x.question_title }}
        </button>
      </div>
    </div>
    <div :class="$style['input-text']">
      <input id="x-yl-input-text" ref="input" v-model="text" :data-visible="inputVisible" type="text"
        :class="$style['input-text-dom']" :placeholder="inputVisible ? '' : '点击输入文字...'" @keypress.enter.stop="send()"
        @focusin="onFocus" @focusout="onBlur">
      <button v-if="inputVisible" v-tap="() => send()" :class="$style['special-button']"
        :disabled="!text">发&nbsp;&nbsp;&nbsp;送</button>
    </div>
  </div>
</template>

<script
  lang="ts"
  setup
  name="ControllerInputText"
>
import useInputFocus from '@/hooks/controller/useInputFocus'

const { ttsaStore, inputVisible, send, text, inputBox, input, onFocus, inputPositionY, onBlur } = useInputFocus()

</script>

<style
  module 
  lang="scss"
>
.controller-input-text {
  @apply w-full relative z-1;

  .input-text-dom {
    @apply w-full flex items-center;
    height: 40px;
    background: rgba(4, 47, 78, 0.3);
    border-radius: 20px;
    padding: 0 18px;
    font-size: 12px;
    outline: 0;
    color: white;

    &::placeholder {
      color: rgba(255, 255, 255, 0.45);
    }
  }

  &.visible {
    @apply fixed left-0 bottom-0 w-screen z-1001;

    .input-text {
      @apply w-full flc relative;
      height: 54px;
      padding: 7.5px;

      &::before {
        @apply w-full h-full absolute z-0 top-0 left-0;
        content: '';
        border-radius: 6px 6px 0px 0px;
        background: rgba(239, 247, 255, 0.85);
        box-shadow: 0px -2px 24px rgba(0, 0, 0, 0.25);
        @include set-backdrop(40px);
      }

      .input-text-dom {
        @apply h-full flex-1 relative z-1;
        outline: 0;
        color: white;
        background: rgba(0, 0, 0, 0.25);
        border-radius: 6px;
        padding: 10px 9.5px;
        margin-right: 5px;
        font-size: 16px;
      }

      .special-button {
        @apply h-full relative z-1 text-white;
        width: 70.5px;
        border-radius: 6px;
        background-color: rgba(70, 115, 238, 1);
        box-shadow: 0px -2px 24px rgba(0, 0, 0, 0.25);
        font-size: 14px;

        &:disabled {
          background-color: rgba(124, 156, 227, 1);
          color: rgba(255, 255, 255, 0.65);
        }
      }
    }

    .qa-list {
      @apply w-full overflow-x-auto overflow-y-hidden;
      margin-bottom: 7px;
      font-size: 12px;
      height: 25px;
      color: rgba(255, 255, 255, 0.8);
      mask: linear-gradient(90deg, transparent 0, black 5%, black 95%, transparent 100%);
      -webkit-mask: linear-gradient(90deg, transparent 0, black 5%, black 95%, transparent 100%);

      &::-webkit-scrollbar {
        width: 0;
        height: 0;
      }

      .qa-list-body {
        @apply flex flex-nowrap h-full;
        padding: 0 5px;
      }

      .qa-list-item {
        @apply h-full flex-shrink-0 select-none;
        padding: 0 14px;
        border-radius: 12.5px;
        border-left: 0.5px solid rgba(133, 160, 255, 0);
        border-right: 0.5px solid rgba(133, 160, 255, 0);
        background: rgba(0, 0, 0, 0.25);

        &+.qa-list-item {
          margin-left: 5px;
        }
      }
    }
  }

}
</style>
